SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>Canvas (HTML)</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading">Canvas (HTML)</h1>

</header>

</div>

L'élément canvas est un composant du <a href="Programmation_web" title="Programmation web">langage Web</a> <a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a> qui permet d'effectuer des <a href="Rendu" title="Rendu">rendus</a> dynamiques d'<a href="Image" title="Image">images</a> <a href="Image_matricielle" title="Image matricielle">bitmap</a> en utilisant des <a href="Langage_de_script" title="Langage de script">scripts</a> dans des langages tels que le <a href="JavaScript" title="JavaScript">javascript</a>. Déjà <a href="Mise_en_%C5%93uvre" title="Mise en œuvre">implémenté</a> dans certains <a href="Navigateur_web" title="Navigateur web">navigateurs</a>, il fait partie de la <a href="Sp%C3%A9cification_(norme_technique)" title="Spécification (norme technique)">spécification</a> <a href="HTML5" title="HTML5">HTML5</a>. Canvas peut également être utilisé pour mettre en place un moyen de traçage de l'utilisateur sur le site sans avoir à collecter ses <a href="Donn%C3%A9es_personnelles" title="Données personnelles">données personnelles</a> grâce au <a href="Canvas_fingerprinting" title="Canvas fingerprinting">canvas fingerprinting</a><a href="#cite_note-1">[1]</a>.

<div class="mw-heading mw-heading2"><h2 id="Historique">Historique</h2></div>

Introduit à l'origine par <a href="Apple" title="Apple">Apple</a> pour être utilisé dans <a href="WebKit" title="WebKit">WebKit</a> pour des <a href="Logiciel" title="Logiciel">logiciels</a> comme <a href="Dashboard_(Apple)" title="Dashboard (Apple)">Dashboard</a> et le navigateur <a href="Safari_(logiciel)" class="mw-redirect" title="Safari (logiciel)">Safari</a>, canvas a été par la suite adopté par les <a href="Navigateur_web" title="Navigateur web">navigateurs</a> utilisant <a href="Gecko_(moteur_de_rendu)" title="Gecko (moteur de rendu)">Gecko</a> (notamment <a href="Mozilla_Firefox" title="Mozilla Firefox">Mozilla Firefox</a>) et <a href="Opera" title="Opera">Opera</a>, avant d'être standardisé par le groupe de travail <a href="WHATWG" class="mw-redirect" title="WHATWG">WHATWG</a>. <a href="Novell" title="Novell">Novell</a> a développé une <a href="Extension_(logiciel)" class="mw-redirect" title="Extension (logiciel)">extension</a> activant les <a href="XForms" title="XForms">XForms</a> dans <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a><a href="#cite_note-2">[2]</a> offrant ainsi une prise en charge des fonctionnalités de canvas.

<div class="mw-heading mw-heading2"><h2 id="Fonctionnement">Fonctionnement</h2></div>

canvas se résume en une zone de dessin dont la hauteur et la largeur sont définies dans du code HTML. Du code <a href="JavaScript" title="JavaScript">JavaScript</a> permet d'accéder à l'aire via une série complète de fonctions de dessins, similaires aux autres <a href="Interface_de_programmation" title="Interface de programmation">API 2D</a>, bien que permettant de générer dynamiquement des graphismes. Certaines personnes ont anticipé cet emploi de canvas en l'utilisant pour des graphiques, des animations et de la création d'images.

<div class="mw-heading mw-heading3"><h3 id="Exemple">Exemple</h3></div>

Ce code crée une zone de dessin sur une page <a href="HTML" class="mw-redirect" title="HTML">HTML</a> :

Affichage d'un texte pour les navigateurs qui ne supportent pas canvas.

</canvas>

</pre></div>

Avec <a href="JavaScript" title="JavaScript">JavaScript</a>, il est ensuite possible de dessiner dans la zone :

var exemple = document.getElementById('exemple');

var contexte = exemple.getContext('2d');

contexte.fillStyle = "rgba(0,0,255,0.5)";

contexte.fillRect(30, 30, 50, 50);

</script>

</pre></div>

Ce code dessine à l'écran un rectangle semi-transparent bleu.

<div class="mw-heading mw-heading2"><h2 id="Dimensions_de_canvas_et_de_la_surface_de_dessin">Dimensions de canvas et de la surface de dessin</h2></div>

Canvas a deux dimensions : celle de l'élément lui-même et celle de la surface de dessin de l'élément. La définition des attributs css width et height de l'élément les définit mais n'affecte que la taille de l'élément et non la surface de dessin.

Par défaut, les dimensions d'un canvas et de sa surface de dessin sont de 300 <a href="Pixel" title="Pixel">pixels</a> de large et 150 pixels de hauteur. Dans l'exemple ci-dessous, avec CSS pour définir la taille de l'élément canvas, la taille de l'élément est de 600/300 pixels, mais la surface de dessin reste inchangée à sa valeur par défaut de 300 pixels × 150 pixels.

Lorsque la taille d'un élément de canevas ne correspond pas à la taille de sa surface de dessin, le <a href="Navigateur_web" title="Navigateur web">navigateur</a> redimensionne la surface de dessin pour s'adapter à l'élément, ce qui peut entraîner des <a href="Effet_de_bord_(informatique)" title="Effet de bord (informatique)">effets de bord</a>.

<div class="mw-heading mw-heading3"><h3 id="Exemple_de_définitions_de_dimensions_différentes">Exemple de définitions de dimensions différentes</h3></div>

<html>

<head>

<title>Dimensions canvas : 600 x 300,

Dimensions de la surface de dessin : 300 x 150</title>

<style>

body {

background: #dddddd;

}

#canvas {

margin: 20px;

padding: 20px;

background: #ffffff;

border: thin inset #aaaaaa;

width: 600px;

height: 300px;

}

</style>

</head>

<body>

Canvas n'est pas accepté par ce navigateur

</canvas>

</body>

</html>

</pre></div>

<div class="mw-heading mw-heading2"><h2 id="Réactions">Réactions</h2></div>

Lors de son introduction, canvas a été accueilli de manière mitigée. Certains se sont plaints de la décision d'Apple d'introduire cette balise propriétaire au lieu de supporter <a href="SVG" class="mw-redirect" title="SVG">SVG</a><a href="#cite_note-3">[3]</a>, qui n'est pas encore complètement accepté sur le web<a href="#cite_note-4">[4]</a>.

<div class="mw-heading mw-heading3"><h3 id="Problématiques_liées_à_la_propriété_intellectuelle">Problématiques liées à la propriété intellectuelle</h3></div>

Le 14 mars 2017, le développeur du <a href="Framework_(logiciel)" title="Framework (logiciel)">framework</a> <a href="WebKit" title="WebKit">WebKit</a> <a href="David_Hyatt" title="David Hyatt">Dave Hyatt</a> transfère un e-mail du responsable du bureau des <a href="Brevet_logiciel" title="Brevet logiciel">brevets</a> d'Apple, Helene Plotka Workman<a href="#cite_note-5">[5]</a>, qui déclare qu'Apple se réserve les droits de <a href="Propri%C3%A9t%C3%A9_intellectuelle" title="Propriété intellectuelle">propriété intellectuelle</a> liés à la section « Graphics: The bitmap canvas »<a href="#cite_note-6">[6]</a> de la nouvelle proposition du <a href="Web_Hypertext_Application_Technology_Working_Group" title="Web Hypertext Application Technology Working Group">Web Hypertext Application Technology Working Group</a> (WHATWG), mais n'est pas opposée à ouvrir les brevets si les spécifications sont transférées sous autre brevet standard. Cette polémique fait ressortir le manque de règles liées à la gestion des brevets par le WHATWG, comparé à celles du <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a> (W3C), qui impose explicitement des licences sans redevance. Apple transférera ensuite les brevets sous les termes de licence du W3C (donc sans redevance)<a href="#cite_note-7">[7]</a>, imposant à Apple de fournir accès au brevet sous cette licence dès que le Canvas devient une proposition de standard du W3C<a href="#cite_note-8">[8]</a>.

<div class="mw-heading mw-heading3"><h3 id="Problématiques_liées_à_la_vie_privée">Problématiques liées à la vie privée</h3></div>

Le Canvas fingerprinting est une technique d'identification par empreinte digitale, qui permet d'identifier et de suivre les visiteurs de site web en utilisant l'élément HTML5 Canvas. Cette technique a reçu une forte couverture médiatique en 2014<a href="#cite_note-Knibbs-9">[9]</a>,<a href="#cite_note-Steinberg-10">[10]</a>,<a href="#cite_note-Angwin-11">[11]</a>,<a href="#cite_note-Kirk-12">[12]</a> après la publication d'un papier The Web never forgets<a href="#cite_note-WebNeverForgets-13">[13]</a> de chercheurs de l'<a href="Universit%C3%A9_de_Princeton" title="Université de Princeton">Université de Princeton</a> et de l'<a href="Universit%C3%A9_catholique_n%C3%A9erlandophone_de_Louvain" class="mw-redirect" title="Université catholique néerlandophone de Louvain">Université catholique néerlandophone de Louvain</a>. Une des problématiques majeures est qu'elle permet un suivi de l'utilisateur même après une suppression des cookies et du cache du navigateur.

<div class="mw-heading mw-heading2"><h2 id="Notes_et_références">Notes et références</h2></div>

<ul><li><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> Cet article est partiellement ou en totalité issu de l’article de Wikipédia en anglais intitulé « <a class="external text" href="https://en.wikipedia.org/wiki/Canvas_element?oldid=37568948">Canvas element</a> » (<a class="external text" href="https://en.wikipedia.org/wiki/Canvas_element?action=history">voir la liste des auteurs</a>).</li></ul>

<li id="cite_note-1"><a href="#cite_ref-1">↑</a> « <a rel="nofollow" class="external text" href="https://www.1and1.fr/digitalguide/web-marketing/analyse-web/le-canvas-fingerprinting-tracage-internet-sans-cookie/"><cite style="font-style:normal;">Canvas fingerprinting : le successeur du cookie</cite></a> », <time class="nowrap" datetime="2016-12-14" data-sort-value="2016-12-14">14 décembre 2016</time> (consulté le <time class="nowrap" datetime="2017-07-31" data-sort-value="2017-07-31">31 juillet 2017</time>)

</li>

<li id="cite_note-2"><a href="#cite_ref-2">↑</a> <a rel="nofollow" class="external text" href="http://lab.cph.novell.com/nxie/">Novell XForms Explorer</a>

</li>

<li id="cite_note-3"><a href="#cite_ref-3">↑</a> « <a rel="nofollow" class="external text" href="https://ln.hixie.ch/?start=1089635050&count=1"><cite style="font-style:normal;">Hixie's Natural Log: Extending HTML</cite></a> », sur ln.hixie.ch (consulté le <time class="nowrap" datetime="2020-08-26" data-sort-value="2020-08-26">26 août 2020</time>)

</li>

<li id="cite_note-4"><a href="#cite_ref-4">↑</a> « <a rel="nofollow" class="external text" href="https://caniuse.com/#feat=svg-html"><cite style="font-style:normal;">Can I use... Support tables for HTML5, CSS3, etc</cite></a> », sur caniuse.com (consulté le <time class="nowrap" datetime="2019-01-04" data-sort-value="2019-01-04">4 janvier 2019</time>)

</li>

<li id="cite_note-5"><a href="#cite_ref-5">↑</a> « <a rel="nofollow" class="external text" href="https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-March/010129.html"><cite style="font-style:normal;">[whatwg] Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007</cite></a> » [<a rel="nofollow" class="external text" href="https://web.archive.org/web/20070502083225/http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-March/010129.html">archive du <time class="nowrap" datetime="2007-05-02" data-sort-value="2007-05-02">2 mai 2007</time></a>] (consulté le <time class="nowrap" datetime="2007-05-01" data-sort-value="2007-05-01"><abbr class="abbr" title="premier">1er</abbr> mai 2007</time>)

</li>

<li id="cite_note-6"><a href="#cite_ref-6">↑</a> <a rel="nofollow" class="external text" href="https://www.whatwg.org/specs/web-apps//#scs-dynamic">Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas</a>

</li>

<li id="cite_note-7"><a href="#cite_ref-7">↑</a> <a rel="nofollow" class="external text" href="http://www.w3.org/2004/01/pp-impl/40318/status#current-disclosures">HTML Working Group Patent Policy Status – Known Disclosures</a>

</li>

<li id="cite_note-8"><a href="#cite_ref-8">↑</a> <a rel="nofollow" class="external text" href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-W3C-RF-license">W3C patent policy in use by HTML working group</a>

</li>

<li id="cite_note-Knibbs-9"><a href="#cite_ref-Knibbs_9-0">↑</a> Knibbs, Kate, « <a rel="nofollow" class="external text" href="https://gizmodo.com/what-you-need-to-know-about-the-sneakiest-new-online-tr-1608455771"><cite style="font-style:normal;">What You Need to Know About the Sneakiest New Online Tracking Tool</cite></a> », sur <a href="Gizmodo" title="Gizmodo">Gizmodo</a>, <time class="nowrap" datetime="2014-07-21" data-sort-value="2014-07-21">21 juillet 2014</time> (consulté le <time class="nowrap" datetime="2014-07-21" data-sort-value="2014-07-21">21 juillet 2014</time>)

</li>

<li id="cite_note-Steinberg-10"><a href="#cite_ref-Steinberg_10-0">↑</a> Joseph Steinberg, « <cite style="font-style:normal">You Are Being Tracked Online By A Sneaky New Technology -- Here's What You Need To Know</cite> », <a href="Forbes_(magazine)" class="mw-redirect" title="Forbes (magazine)">Forbes</a>,‎ <time class="nowrap" datetime="2014-07-23" data-sort-value="2014-07-23">23 juillet 2014</time> (<a rel="nofollow" class="external text" href="https://www.forbes.com/sites/josephsteinberg/2014/07/23/you-are-being-tracked-online-by-a-sneaky-new-technology-heres-what-you-need-to-know/">lire en ligne</a>, consulté le <time class="nowrap" datetime="2014-11-15" data-sort-value="2014-11-15">15 novembre 2014</time>)<span class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.atitle=You+Are+Being+Tracked+Online+By+A+Sneaky+New+Technology+--+Here%27s+What+You+Need+To+Know&rft.jtitle=Forbes&rft.aulast=Steinberg&rft.aufirst=Joseph&rft.date=2014-07-23&rft_id=https%3A%2F%2Fwww.forbes.com%2Fsites%2Fjosephsteinberg%2F2014%2F07%2F23%2Fyou-are-being-tracked-online-by-a-sneaky-new-technology-heres-what-you-need-to-know%2F&rfr_id=info%3Asid%2Ffr.wikipedia.org%3ACanvas+%28HTML%29">

</li>

<li id="cite_note-Angwin-11"><a href="#cite_ref-Angwin_11-0">↑</a> Angwin, Julia, « <a rel="nofollow" class="external text" href="https://www.propublica.org/article/meet-the-online-tracking-device-that-is-virtually-impossible-to-block"><cite style="font-style:normal;">Meet the Online Tracking Device That is Virtually Impossible to Block</cite></a> », <a href="ProPublica" title="ProPublica">ProPublica</a>, <time class="nowrap" datetime="2014-07-21" data-sort-value="2014-07-21">21 juillet 2014</time> (consulté le <time class="nowrap" datetime="2014-07-21" data-sort-value="2014-07-21">21 juillet 2014</time>)

</li>

<li id="cite_note-Kirk-12"><a href="#cite_ref-Kirk_12-0">↑</a> Kirk, Jeremy, « <cite style="font-style:normal">Stealthy Web tracking tools pose increasing privacy risks to users</cite> », <a href="PC_World" title="PC World">PC World</a>,‎ <time class="nowrap" datetime="2014-07-21" data-sort-value="2014-07-21">21 juillet 2014</time> (<a rel="nofollow" class="external text" href="http://www.pcworld.com/article/2456640/stealthy-web-tracking-tools-pose-increasing-privacy-risks-to-users.html">lire en ligne</a>, consulté le <time class="nowrap" datetime="2014-07-21" data-sort-value="2014-07-21">21 juillet 2014</time>)<span class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.atitle=Stealthy+Web+tracking+tools+pose+increasing+privacy+risks+to+users&rft.jtitle=PC+World&rft.aulast=Jeremy&rft.aufirst=Kirk%2C&rft.date=2014-07-21&rft_id=http%3A%2F%2Fwww.pcworld.com%2Farticle%2F2456640%2Fstealthy-web-tracking-tools-pose-increasing-privacy-risks-to-users.html&rfr_id=info%3Asid%2Ffr.wikipedia.org%3ACanvas+%28HTML%29">

</li>

<li id="cite_note-WebNeverForgets-13"><a href="#cite_ref-WebNeverForgets_13-0">↑</a> Acar, Gunes, Eubank, Christian, Englehardt, Steven, Juarez, Marc, Narayanan, Arvind et Diaz, Claudia, « <a rel="nofollow" class="external text" href="https://securehomes.esat.kuleuven.be/~gacar/persistent/index.html"><cite style="font-style:normal;">The Web never forgets: Persistent tracking mechanisms in the wild</cite></a> », <time class="nowrap" datetime="2014-07-24" data-sort-value="2014-07-24">24 juillet 2014</time> (consulté le <time class="nowrap" datetime="2014-07-24" data-sort-value="2014-07-24">24 juillet 2014</time>)

</li>

</ol></div>

<div class="mw-heading mw-heading2"><h2 id="Voir_aussi">Voir aussi</h2></div>

<div class="mw-heading mw-heading3"><h3 id="Articles_connexes">Articles connexes</h3></div>

<li><a href="Quartz_(informatique)" title="Quartz (informatique)">Quartz</a></li>

<li><a href="Cairo_(informatique)" class="mw-redirect" title="Cairo (informatique)">Cairo</a></li>

<li><a href="Adobe_Flash" title="Adobe Flash">Adobe Flash</a></li></ul>

<div class="mw-heading mw-heading3"><h3 id="Liens_externes">Liens externes</h3></div>

<ul><li><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> <a rel="nofollow" class="external text" href="https://www.whatwg.org/specs/web-apps/current-work/#dynamic">Description de canvas</a> dans le brouillon des <a href="Application_web" title="Application web">applications web</a> du <a href="WHATWG" class="mw-redirect" title="WHATWG">WHATWG</a></li>

<li><abbr class="abbr indicateur-langue" title="Langue : français">(fr)</abbr> <a rel="nofollow" class="external text" href="https://developer.mozilla.org/fr/HTML/Canvas">Présentation de canvas</a> sur Mozilla Developer Center</li>

<li><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> <a rel="nofollow" class="external text" href="https://github.com/Nyl000/NCL.js">NCL.js</a> Bibliothèque JavaScript permettant de réaliser facilement des animations en canvas.</li>

<li><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> <a rel="nofollow" class="external text" href="http://www.w3schools.com/tags/ref_canvas.asp">W3Schools</a> Référence sur les fonctions de la balise Canvas.</li></ul>

</div>

<ul id="bandeau-portail" class="bandeau-portail"><li> Portail de l’informatique </li> </ul></div><div><div class="zim-footer">

Cet article est issu de <a class="external text" title="Dernière modification le 2025-02-06" href="https://fr.wikipedia.org/wiki/?title=Canvas_(HTML)&oldid=222768189">Wikipédia</a>. Sauf mention contraire, le texte est disponible sous <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr">Creative Commons Attribution-Share Alike 4.0</a>. Des conditions supplémentaires peuvent s’appliquer aux fichiers multimédias.

</div>

</div></div>

</div>

</main>

</div>

</body></html>